<template>
  <div class="pdf-box">
    <pdf
      v-for="i in numPages"
      :key="i"
      :src="src"
      :page="i"
      style="
        display: inline-block;
        width: 25%;
        margin: 10px 10px;
        border: 2px solid black;
      "
    ></pdf>
  </div>
</template>

<script>
import pdf from "vue-pdf";

var loadingTask = pdf.createLoadingTask(
  "http://qinniu.douziqianduan.icu/oa_work02.pdf"
);

export default {
  name: "Pdf02",
  components: {
    pdf,
  },
  data() {
    return {
      src: loadingTask,
      numPages: undefined,
    };
  },
  mounted() {
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages;
    });
  },
};
</script>

<style scoped>
.pdf-box {
  border: 2px solid black;
}
</style>